<div class="modal-dialog modal-lg">
	<div class="modal-content">
		<div class="modal-header">
  		 	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      		<h4 class="modal-title">{:L('heading_title')}</h4>
		</div>
		<div class="modal-body">
			<div class="row">
				<div class="col-sm-5">
					<a id="button-parent" data-toggle="tooltip" title="{:L('button_parent')}" href="{$parent}" class="btn btn-default"><i class="fa fa-level-up"></i></a>
					<a data-toggle="tooltip" title="{:L('button_refrash')}"  href="__SELF__" class="btn btn-default" id="button-refresh"><i class="fa fa-refresh"></i></a>
					<button type="button" id="button-upload"  data-toggle="tooltip" title="{:L('button_upload_image')}"  class="btn btn-primary"><i class="fa fa-upload"></i></button>
					<button type="button" id="button-folder"  data-toggle="tooltip" title="{:L('button_add_directory')}"  class="btn btn-default"><i class="fa fa-folder"></i></button>
					<button type="button"  data-toggle="tooltip" title="{:L('button_delete')}"  id="button-delete" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
				</div>
				<div class="col-sm-7">
		          <div class="input-group">
		            <input type="text" name="search" value="{$filter_name}" placeholder="{:L('entry_search')}" class="form-control">
		            <span class="input-group-btn">
		            <button type="button" data-toggle="tooltip" title="{:L('button_search')}" id="button-search" class="btn btn-primary"><i class="fa fa-search"></i></button>
		            </span></div>
		        </div>
			</div>
			<hr>
			<div class="row">
				<foreach name="images" item="image">
					<div class="col-sm-3 text-center">			
						<if condition="($image['type'] eq 'directory')">
							<a href="{$image.href}" image="{$image.image}" class="directory">
								<i class="fa fa-folder fa-5x"></i>
							</a>	
							<else/>
							<a href="{$image.href}" image="{$image.image}" class="thumbnail">
								<img path="{$image.path}" src="{$image.thumb}">
							</a>
							</if>						
						<label>
							<input type="checkbox" name="path[]" value="{$image.path}">
							{$image.name}
						</label>
					</div>
				</foreach>
			</div>
		</div>
		<div class="modal-footer" id="progress-footer">
			<nav>
  				<ul class="pagination">
  				{$page}
  				</ul>
  			</nav>
		</div>
	</div>	
</div>
<script type="text/javascript">
	//如果是图片按钮
	<?php if ($target) { ?>
		$('a.thumbnail').on('click', function(e) {
			e.preventDefault();
			<?php if ($thumb) { ?>
			$('#<?php echo $thumb; ?>').find('img').attr('src', $(this).find('img').attr('src'));
			<?php } ?>

			$('#<?php echo $target; ?>').attr('value', $(this).parent().find('input').attr('value'));

			$('#modal-image').modal('hide');
		});
	<?php } ?>
	$(function(){
		//Page
		$('.pagination a').on('click', function(e) {
			e.preventDefault();

			$('#modal-image').load($(this).attr('href'));
		});
		//directory links
		$('a.directory').on('click', function(e) {
			e.preventDefault();
			$('#modal-image').load($(this).attr('href'));
		});
		//返回上一级目录
		$('#button-parent').on('click', function(e) {
			e.preventDefault();

			$('#modal-image').load($(this).attr('href'));
		});
		//刷新
		$('#button-refresh').on('click', function(e) {
			e.preventDefault();

			$('#modal-image').load($(this).attr('href'));
		});
		//搜索
		$('input[name=\'search\']').on('keydown', function(e) {
			if (e.which == 13) {
				$('#button-search').trigger('click');
			}
		});
	})
	
	//上转图片
	$(function(){
		progress_html = '<div class="progress">';
		progress_html +='	<div class="progress-bar" style="">';
		progress_html +='	</div>';
		progress_html +='</div>';
		$('#button-upload').on('click', function() {
			$('#form-upload').remove();

			$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file[]" value="" multiple="multiple"/></form>');

			$('#form-upload input[name=\'file[]\']').trigger('click');

			if (typeof timer != 'undefined') {
		    	clearInterval(timer);
			}

			timer = setInterval(function() {
				if ($('#form-upload input[name=\'file[]\']').val() != '') {
					clearInterval(timer);
					$.ajax({
						url: '{$upload}',
						type: 'post',
						dataType: 'json',
						data: new FormData($('#form-upload')[0]),
						cache: false,
						contentType: false,
						processData: false,
						beforeSend: function() {
							$('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
							$('#button-upload').prop('disabled', true);
							$('#progress-footer').prepend(progress_html);
						},
						complete: function() {
							$('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
							$('#button-upload').prop('disabled', false);
							$('#progress-footer .progress').remove();
						},
						success: function(json) {
							if (json['error']) {
								alert(json['error']);
							}

							if (json['success']) {
								//alert(json['success']);

								$('#button-refresh').trigger('click');
							}
						},
						error: function(xhr, ajaxOptions, thrownError) {
							alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
						},
						xhr: function(){
				　　　　　　var xhr = $.ajaxSettings.xhr();
				　　　　　　if(onprogress && xhr.upload) {
				　　　　　　　　xhr.upload.addEventListener("progress" , onprogress, false);
				　　　　　　　　return xhr;
				　　　　　　}
				　　　　} 
					});
				}
			}, 500);
		});

		function onprogress(evt){
		　　var loaded = evt.loaded;     //已经上传大小情况 
		 	var tot = evt.total;      //附件总大小 
		 	var per = Math.floor(100*loaded/tot);  //已经上传的百分比 
		　　$("#progress-footer .progress-bar").html( per +"%" );
		 	$("#progress-footer .progress-bar").css("width" , per +"%");
		}
	})
	//创建文件夹
	$(function(){

		$('#button-folder').popover({
			html: true,
			placement: 'bottom',
			trigger: 'click',
			title: '{:L('entry_directory')}',
			content: function() {
				html  = '<div class="input-group">';
				html += '  <input type="text" name="folder" value="" placeholder="{:L('entry_directory')}" class="form-control">';
				html += '  <span data-toggle="tooltip" class="input-group-btn"><button type="button" title="{:L('text_create_directory')}" id="button-create" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></span>';
				html += '</div>';

				return html;
			}
		});

		$('#button-folder').on('shown.bs.popover', function() {
			$('#button-create').on('click', function() {
				$.ajax({
					url: '{$folder}',
					type: 'post',
					dataType: 'json',
					data: 'folder=' + encodeURIComponent($('input[name=\'folder\']').val()),
					beforeSend: function() {
						$('#button-create').prop('disabled', true);
					},
					complete: function() {
						$('#button-create').prop('disabled', false);
					},
					success: function(json) {
						if (json['error']) {
							alert(json['error']);
						}

						if (json['success']) {
							//alert(json['success']);

							$('#button-refresh').trigger('click');
						}
					},
					error: function(xhr, ajaxOptions, thrownError) {
						alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
					}
				});
			});
		});
	})	
	//删除文件或文件夹
	$('#modal-image #button-delete').on('click', function(e) {
		if (confirm('{:L("text_confirm_delete")}')) {
			$.ajax({
				url: '{:U("delete")}',
				type: 'post',
				dataType: 'json',
				data: $('input[name^=\'path\']:checked'),
				beforeSend: function() {
					$('#button-delete').prop('disabled', true);
				},
				complete: function() {
					$('#button-delete').prop('disabled', false);
				},
				success: function(json) {
					if (json['error']) {
						alert(json['error']);
					}

					if (json['success']) {
						//alert(json['success']);

						$('#button-refresh').trigger('click');
					}
				},
				error: function(xhr, ajaxOptions, thrownError) {
					alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
				}
			});
		}
	});
	//搜索
	$('#button-search').on('click', function(e) {
		var url = '__SELF__';

		var filter_name = $('input[name=\'search\']').val();
		if (filter_name) {
			url += url_splice(url) + 'filter_name=' + encodeURIComponent(filter_name);
		}
		$('#modal-image').load(url);
	});

	//单个图片上传

</script>